<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div class="p-3">
    <div class="flex">
      <div class="block-left">
        <div class="tree-block">
          <el-input v-model="filterText" style="width: 240px" :suffix-icon="Search" placeholder="请输入机型或批次号" />
          <el-scrollbar class="scrollbar">
            <el-tree
              ref="treeRef"
              style="max-width: 600px"
              class="filter-tree"
              :data="data"
              node-key="id"
              :current-node-key="'0_0'"
              :props="defaultProps"
              highlight-current
              default-expand-all
              :filter-node-method="filterNode"
              @node-click="handleNodeClick"
            />
          </el-scrollbar>
        </div>
      </div>
      <div class="block-right">
        <el-form :model="paramForm" inline>
          <el-form-item prop="section" label="部段名称">
            <el-input v-model="paramForm.section" placeholder="请输入" maxlength="20"></el-input>
          </el-form-item>
          <el-form-item prop="mainSection" label="主部段">
            <el-input v-model="paramForm.mainSection" placeholder="请输入" maxlength="20"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">查询</el-button>
          </el-form-item>
        </el-form>
        <el-button v-hasPermi="['strength:model:compare']" type="primary" @click="handleStrengthCompare">强度数模清单对比</el-button>
        <el-table v-loading="loading" :data="tableDatas" class="p-t-3" height="calc(100vh - 275px)">
          <el-table-column prop="groupType" label="部段号"></el-table-column>
          <el-table-column prop="section" label="部段名称"></el-table-column>
          <el-table-column prop="mainSection" label="主部段"></el-table-column>
          <!-- <el-table-column prop="mainSection" label="层次"></el-table-column> -->
          <el-table-column prop="summary" label="包含的零件总类">
            <template #default="scope">
              {{ getData(scope.row.summary) }}
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="数据更新日期"></el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button v-hasPermi="['strength:view:part']" type="text" @click="handleView(scope.row)">查看零件强度详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" v-model:page="paramForm.pageNum" v-model:limit="paramForm.pageSize" :total="total" @pagination="getList" />
      </div>
    </div>
    <StrengthCompareDialog ref="strengthCompareDialogRef" />
    <PartStrengthDialog ref="partStrengthDialogRef" />
  </div>
</template>

<script setup name="standardInstallationList" lang="ts">
import { Search } from '@element-plus/icons-vue';
import { getStrengthListV2 } from '@/api/bomCompareTool/strengthModelList/index';
import { getTrackListV2 } from '@/api/bomCompareTool/standardInstallationList/index';
import StrengthCompareDialog from './strengthCompareDialog.vue';
import PartStrengthDialog from './partStrengthDialog.vue';
const { proxy } = getCurrentInstance();
const filterText = ref('');
const defaultProps = {
  children: 'children',
  label: 'label'
};
interface Tree {
  [key: string]: any;
}
const multipleSelection = ref({});
const treeRef = ref();
const data = ref([]);
const total = ref(0);
const paramForm = reactive({
  aircraftModel: '',
  section: '',
  mainSection: '',
  track: '',
  pageNum: 1,
  pageSize: 10
});
const tableDatas = ref([]);
const loading = ref(false);
const strengthCompareDialogRef = ref();
const partStrengthDialogRef = ref();
const filterNode = (value: string, data: Tree) => {
  if (!value) return true;
  return data.label.includes(value);
};
const getList = async () => {
  const res = await getStrengthListV2(paramForm);
  tableDatas.value = res.rows;
  total.value = res.total;
};
const handleQuery = () => {
  paramForm.pageNum = 1;
  getList();
};
const handleNodeClick = (node) => {
  if (!node.children) {
    paramForm.aircraftModel = node.parent;
    paramForm.track = node.label;
  }
  getList();
};
const initData = async () => {
  const res = await getTrackListV2();
  data.value = res.map((item, index) => {
    const obj = {
      id: index + '',
      label: item.aircraftModel,
      children: item.trackGroupInfoVos.map((el, ind) => {
        {
          return {
            id: index + '_' + ind,
            label: el.track,
            parent: item.aircraftModel
          };
        }
      })
    };
    return obj;
  });
};
const handleSelectionChange = (val, index) => {
  multipleSelection.value[index] = val;
};
const handleStrengthCompare = () => {
  strengthCompareDialogRef.value.openDialog();
};
const handleView = (row) => {
  partStrengthDialogRef.value.openDialog(row);
};
const getData = (datas) => {
  const obj = JSON.parse(datas);
  return obj.distinctCodeCount;
};
watch(filterText, (val) => {
  treeRef.value!.filter(val);
});
onMounted(async () => {
  await initData();
  paramForm.aircraftModel = data.value[0].label;
  const children = data.value[0].children;
  if (children) {
    paramForm.track = children[0].label;
  }
  getList();
});
</script>

<style lang="scss" scoped>
.block-left {
  width: 240px;
}
.tree-block {
  border: 1px solid #e4e4e4;
  margin-top: 8px;
}
.scrollbar {
  height: calc(100vh - 145px);
}
.block-right {
  padding-left: 12px;
  width: calc(100% - 250px);
}
</style>
